<template>
  <j-modal
    :positionCode='positionCode'
    :title='title'
    :visible='visible'
    :width='800'
    cancelText='关闭'
    style='top:50px;'
    switchFullscreen
    @cancel='close'
    @ok='handleSubmit'
  >
    <a-spin :spinning='false' tip='Loading...'>
      <a-row v-if='visible' :gutter='10' style='padding: 10px; margin: -10px'>
        <a-card :bordered='false'>
          <a-form layout='inline' @keyup.enter.native='searchQuery'>
            <a-row :gutter='24'>
              <a-col :md='7' :sm='24'>
                <a-form-item label=''>
                  <a-input v-model='queryParam.positionCode' placeholder='职位编码'></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='7' :sm='24'>
                <a-form-item label=''>
                  <a-input v-model='queryParam.positionNmae' placeholder='职位名称'></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='7' :sm='24'>
                <a-button icon='search' style='margin-top: 5px' type='primary' @click='searchQuery'>查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-table
            ref='table'
            :columns='terminalsColumns'
            :dataSource='terminals'
            :loading='loading'
            :pagination='ipagination'
            :scroll="{
                    x:'max-content'
                  }"
            bordered
            size='middle'
            tableLayout='auto'
            @change='handleTableChange'
          >
          </a-table>
        </a-card>
      </a-row>
    </a-spin>

  </j-modal>

</template>

<script>
import { filterObj } from '@/utils/util'
import { queryDepartTreeList, getUserList, queryUserByDepId } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
import JInput from '@/components/cn-form/JInput.vue'
import { getStore } from '@/utils/storage'
import { PageListMixin } from '@/mixins/PageListMixin'

export default {
  name: 'ConfigTerm',
  components: { JInput },
  props: {
    modalWidth: {
      default() {
        return '1200px'
      }
    },
    positionCode:{
      type: String,
      default: ''
    },
    'multi': Boolean
  },
  data() {
    return {
      typeLoading: false,
      queryParam: {
        code: '',
        name: ''
      },
      positionCode:"",
      terminals: [],
      terminalsData: [],
      terminalsColumns: [
        {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '职位编码',
          align: 'center',
          dataIndex: 'positionCode'
        },
        {
          title: '职位名称',
          align: 'center',
          dataIndex: 'positionName'
        }
      ],

      terminalSelectedRowKeys: [],
      terminalSelectionRows: [],

      title: '查看下属',
      selectedKeys: [],
      visible: false,
      form: this.$form.createForm(this),
      loading: false,
      expandedKeys: [],
      url: {},
      record: null
    }
  },
  mixins: [PageListMixin],
  computed: {},
  watch: {},
  created() {
    // 该方法触发屏幕自适应
    // this.resetScreenSize()
  },
  methods: {
    showModal(record) {
      this.visible = true
      this.form.resetFields()
    },
    /**
     * 获取查询参数
     * @returns {*}
     */
    getQueryParams() {
      let param = Object.assign({}, this.queryParam)
      param.current = this.ipagination.current
      param.size = this.ipagination.pageSize
      return filterObj(param)
    },
    searchReset(num) {
      let that = this
      if (num !== 0) {
        that.loadData(1)
      }
      that.selectedKeys = []
      that.categoryData = []
      that.terminalsData = []
      that.terminalSelectionRows = []
      that.terminalSelectedRowKeys = []
    },
    close() {
      this.searchReset(0)
      this.visible = false
    },
    handleSubmit() {
      let that = this
      that.$emit('ok', {
        terminalExtendVos: that['terminalsData'],
        username: this.userInfo.userName
      })
      that.searchReset(0)
      that.close()
    },

    onSearch() {
      this.loadData(1)
    },

    /**
     * 覆盖mixin的loadData方法
     * @param arg
     * @returns {Promise<void>}
     */
    loadData(arg) {
      let params = this.getQueryParams()//查询条件
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let url = window._CONFIG['domianURL'] +'/cnPositionController/findSubordinateAllPosList'
      this.loading = true
      params.positionCode = this.positionCode
      console.log(params)
      postAction(url, { ...params }).then((res) => {
        console.log(res)
        if (res.success) {
          this.terminals = res.result.records
          this.ipagination.total = res.result.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}
</style>

